<template>
  <view class="container">
    <scroll-view scroll-y class="list">
      <view class="list-item" v-for="(user, index) in users" :key="index" @click="gotoPage('/pages/agent/placement/placement')">
        <view class="avatar"></view>
        <view class="info">
          <view class="name">{{ user.name }}</view>
          <view class="details">UID: {{ user.uid }}  TEL: {{ user.phone }}</view>
        </view>
        <view class="arrow">&gt;</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: '张青', uid: 'mz448020', phone: '15823399939' },
        { name: '张青1', uid: 'mz937088', phone: '15823399939' },
        { name: 'qq5026', uid: 'mz112394', phone: '18716298100' },
        { name: '彭', uid: 'mz437028', phone: '15279034936' },
        { name: '彭', uid: 'mz298957', phone: '15279034936' },
        { name: '蒋桂华', uid: 'mz951749', phone: '15923350288' },
        { name: '张枝', uid: 'mz522956', phone: '13452429533' },
        { name: '杨念航', uid: 'mz265799', phone: '13399895881' },
      ],
    };
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
  padding: 0px
}
.header {
  text-align: center;
  padding: 15px 0;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #e5e5e5;
}
.list {
  flex: 1;
  padding: 10px;
}
.list-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}
.avatar {
  width: 50px;
  height: 50px;
  background-color: #e5e5e5;
  border-radius: 50%;
  margin-right: 10px;
}
.info {
  flex: 1;
}
.name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.details {
  font-size: 14px;
  color: #666;
}
.arrow {
  font-size: 18px;
  color: #999;
  margin-right: 30px;
}
</style>
